<template>
  <div class="home">
    <el-scrollbar height="100%">
      <!-- 统计栏 -->
      <el-row class="home-sitestats" type="flex">
        <el-space v-model="sitestats">
          <el-col :span="24">
            <el-card class="h-sitestats-card">
              <template #header>
                <div class="home-sitestats-1">
                  <span class="home-sitestats-h">今日新增用户</span>
                </div>
              </template>
              <span v-if="sitestats.NewUsers != null">{{
                sitestats.NewUsers
              }}</span>
              <span v-else>Loading</span>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card class="h-sitestats-card">
              <template #header>
                <div class="home-sitestats-1">
                  <span class="home-sitestats-h">今日网站浏览</span>
                </div>
              </template>
              <span v-if="sitestats.WebVisit != null">{{
                sitestats.WebVisit
              }}</span>
              <span v-else>Loading</span>
            </el-card>
          </el-col>
        </el-space>
        <el-col :span="24" style="flex: 1">
          <el-card class="h-sitestats-card">
            <template #header>
              <div class="home-sitestats-1">
                <span class="home-sitestats-h">广告位招租</span>
              </div>
            </template>
            <span>Hello Word……</span>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表折线图1-->
      <el-row style="margin-top: 10px" class="home-echart">
        <el-col :span="24">
          <el-card class="home-echart-1">
            <template #header>
              <div class="card-header">
                <span>30天用户注册曲线图</span>
              </div>
            </template>
            <div id="home-echart-line"></div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表折线图2-->
      <el-row style="margin-top: 10px" class="home-echart">
        <el-col :span="24">
          <el-card class="home-echart-1">
            <template #header>
              <div class="card-header">
                <span>广告位招租</span>
              </div>
            </template>
            <div>
              <span>广告位招租</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
@font-face {
  font-family: "en";
  /* 指定字体名称 */
  src: url("../assets/Font/RubikIso-Regular.ttf");
  // font-display: swap;
}

@font-face {
  font-family: "cn";
  /* 指定字体名称 */
  src: url("../assets/Font/MaShanZheng-Regular.ttf");
  // font-display: swap;
}
.home {
  height: calc(100vh - 120px) !important;
  overflow: hidden;
  .home-sitestats {
    .h-sitestats-card {
      font-family: "en" !important;
      font-size: 30px;
      text-align: center;
      color: red;
    }
    .home-sitestats-h {
      font-family: "cn" !important;
      font-size: 20px;
    }
    .home-sitestats-1 {
      text-align: center;
    }
  }
  .home-echart {
    #home-echart-line {
      height: 300px;
    }
  }
}
</style>

<script setup type="text/javascript">
// vuex
import { useStore } from "vuex";
const store = useStore();

// vue组件
import { inject, onMounted, reactive, ref, watch } from "vue";
// 图表组件
import * as echarts from "echarts";
// axios
const axios = inject("axios");

const myChart = ref();
//初始化图表
const echartDatas = reactive({});
watch(
  echartDatas,
  (newvalue) => {
    store.commit("homeStore/upEchartDatas", newvalue);
    var option = {
      tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      legend: { trigger: "axis" },
      xAxis: {
        type: "time",
        max: "dataMax",
        splitNumber: 28,
        axisLine: {
          symbol: ["none", "arrow"],
        },
        axisTick: {
          // length: 0,
          inside: true,
          lineStyle: {
            type: "dashed",
            // ...
          },
        },
      },
      yAxis: {},
      series: [
        {
          data: echartDatas.newUser,
          type: "line",
          name: "当日新增用户",
          smooth: true,
        },
        {
          data: echartDatas.webSite,
          type: "line",
          name: "当日网站浏览",
          smooth: true,
        },
        {
          data: echartDatas.webSiteIP,
          type: "line",
          name: "当日IP浏览",
          smooth: true,
        },
      ],
    };
    myChart.value.hideLoading();
    myChart.value.setOption(option);
  },
  { deep: true }
);

// 统计信息
const sitestats = reactive({});
watch(
  sitestats,
  (newvalue) => {
    store.commit("homeStore/upSitestats", newvalue);
  },
  { deep: true }
);

//页面加载完成执行
onMounted(() => {
  // 初始化图表
  myChart.value = echarts.init(
    document.getElementById("home-echart-line"),
    null,
    {
      height: 300,
    }
  );
  myChart.value.showLoading();
  if (store.state.homeStore.echartDatas == null) {
    //获取图表数据
    axios.get("BBS_SiteStats/GetEchartLine", null, null, (res) => {
      var data = JSON.parse(res.data);
      Object.assign(echartDatas, data);
    });
  } else {
    Object.assign(echartDatas, store.state.homeStore.echartDatas);
  }

  //获取统计信息
  if (store.state.homeStore.sitestats == null) {
    axios.get("BBS_SiteStats/GetSiteStats", null, null, (res) => {
      var data = JSON.parse(res.data);
      Object.assign(sitestats, data);
    });
  } else {
    Object.assign(sitestats, store.state.homeStore.sitestats);
  }
});
</script>
